<template>
	<view>
		<view class="bg-white flex justify-start align-center w-100"
			:style="{height: StatusBar+'px', overflowX: 'auto', whiteSpace: 'nowrap'}">
			<view class="inline-block relative padding-sm  flex justify-start align-center">
				<text @tap="searchMd.change" class="">{{searchMd.sname ? searchMd.sname : '门店'}}</text>
				<text :class="searchMd.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0 "
					v-show="searchMd.show">
					<view style="white-space: normal;" class="padding-xs w-100">
						<text v-for="(md,index) in searchMd.mds" @tap="searchMd.aa" :data-storeid="md.storeid"
							:data-sname="md.sname" :key="index"
							class="padding-xs margin-xs bg-g-main text-main inline-block">{{md.sname}}</text>
					</view>
					<view class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchMd.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchMd.cancel" class="cu-btn bg-white text-red">取消</button>
					</view>
				</view>

			</view>

			<view class="inline-block relative padding-sm  flex justify-start align-center">
				<text @tap="searchtp.change" class="">{{searchtp.tpname ? searchtp.tpname : '类型'}}</text>
				<text :class="searchtp.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0"
					v-show="searchtp.show">
					<view style="white-space: normal;" class="padding-xs w-100">
						<text v-for="(tp,index) in searchtp.tps" :key="index" @tap="searchtp.aa" :data-tp="tp.code"
							:data-tpname="tp.value"
							class="padding-xs margin-xs bg-g-main text-main radius inline-block">{{tp.value}}</text>
					</view>
					<view class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchtp.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchtp.cancel" class="cu-btn bg-white text-red">取消</button>
					</view>
				</view>
			</view>

			<view class="inline-block relative padding-sm  flex justify-center align-center">
				<text @tap="searchfunc.change" class="">{{searchfunc.funcname ? searchfunc.funcname : '功能'}}</text>
				<text :class="searchfunc.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0"
					v-show="searchfunc.show">
					<view style="white-space: normal;" class="padding-xs w-100">
						<text v-for="(func,index) in searchfunc.funcs" :key="index" @tap="searchfunc.aa"
							:data-func="func.code" :data-funcname="func.value"
							class="padding-xs margin-xs bg-g-main text-main inline-block">{{func.value}}</text>
					</view>
					<view class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchfunc.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchfunc.cancel" class="cu-btn bg-white text-red">取消</button>
					</view>
				</view>
			</view>


			<view class="inline-block relative padding-sm  flex justify-center align-center">
				<text @tap="searchdt.change"
					class="">{{searchObj.cd ? searchObj.cd + ' ' + searchObj.st + '~' + searchObj.et : '日期时间'}}</text>
				<text :class="searchdt.show ? 'cuIcon-triangleupfill' : 'cuIcon-triangledownfill'"></text>
				<view :style="{top: StatusBar*2+CustomBar+'px', zIndex: 999}" class="bg-white shadow w-100 fixed left0"
					v-show="searchdt.show">
					<view style="white-space: normal;" class="padding-xs w-100 flex">
						<picker class="" mode="date" :value="searchdt.cd" :start="nowDateStr"
							@change="timeChange($event, searchdt, 'cd')">
							<view style="height: 1.7rem;" class="bg-g-main text-main radius padding-xs margin-xs">
								{{searchdt.cd ? searchdt.cd : '选择日期'}}</view>
						</picker>
						<picker class="" mode="time" :value="searchdt.st" start="00:00" end="23:59"
							@change="timeChange($event, searchdt, 'st')">
							<view style="height: 1.7rem;" class="bg-g-main text-main radius padding-xs margin-xs">
								{{searchdt.st ? searchdt.st : '开始时间'}}</view>
						</picker>
						<picker class="" mode="time" :value="searchdt.et" start="00:00" end="23:59"
							@change="timeChange($event, searchdt, 'et')">
							<view style="height: 1.7rem;" class="bg-g-main text-main radius padding-xs margin-xs">
								{{searchdt.et ? searchdt.et : '结束时间'}}</view>
						</picker>
					</view>
					<view class="bg-white w-100 padding-sm flex justify-around align-center">
						<button @tap="searchdt.clean" class="cu-btn bg-white text-green">清空</button>
						<button @tap="searchdt.cancel" class="cu-btn bg-white text-red">取消</button>
						<button @tap="searchdt.aa" class="cu-btn bg-white text-blue">确认</button>
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				nowDateStr: this.util.dateUtils.nowDateStr(),
				searchMd: {
					show: false,
					storeid: "",
					sname: "",
					mds: this.constant.mds,
					change: () => {
						this.cancelAll();
						this.searchMd.show = !this.searchMd.show;
					},
					aa: e => {
						this.searchMd.sname = e.currentTarget.dataset.sname;
						this.searchMd.storeid = e.currentTarget.dataset.storeid;
						this.searchMd.show = false;
						this.searchObj.storeid = e.currentTarget.dataset.storeid;
						this.$emit("change", this.searchObj);
					},
					clean: () => {
						this.searchMd.sname = "";
						this.searchMd.storeid = "";
						this.searchMd.show = false;
						this.searchObj.storeid = "";
						this.$emit("change", this.searchObj);
					},
					cancel: () => {
						this.searchMd.show = false;
					},
				},

				searchtp: {
					show: false,
					tp: "",
					tpname: "",
					tps: this.constant.roomtp.dicts,
					change: () => {
						this.cancelAll();
						this.searchtp.show = !this.searchtp.show;
					},
					aa: e => {
						this.searchtp.tpname = e.currentTarget.dataset.tpname;
						this.searchtp.tp = e.currentTarget.dataset.tp;
						this.searchtp.show = false;
						this.searchObj.tp = e.currentTarget.dataset.tp;
						this.$emit("change", this.searchObj);
					},
					clean: () => {
						this.searchtp.tpname = "";
						this.searchtp.tp = "";
						this.searchtp.show = false;
						this.searchObj.tp = "";
						this.$emit("change", this.searchObj);
					},
					cancel: () => {
						this.searchtp.show = false;
					},
				},


				searchfunc: {
					show: false,
					func: "",
					funcname: "",
					funcs: this.constant.roomfunc.dicts,
					change: () => {
						this.cancelAll();
						this.searchfunc.show = !this.searchfunc.show;
					},
					aa: e => {
						this.searchfunc.funcname = e.currentTarget.dataset.funcname;
						this.searchfunc.func = e.currentTarget.dataset.func;
						this.searchfunc.show = false;
						this.searchObj.func = e.currentTarget.dataset.func;
						this.$emit("change", this.searchObj);
					},
					clean: () => {
						this.searchfunc.funcname = "";
						this.searchfunc.func = "";
						this.searchfunc.show = false;
						this.searchObj.func = "";
						this.$emit("change", this.searchObj);
					},
					cancel: () => {
						this.searchfunc.show = false;
					},
				},


				searchdt: {
					show: false,
					cd: "",
					st: "",
					et: "",
					change: () => {
						this.cancelAll();
						this.searchdt.show = !this.searchdt.show;
					},
					aa: e => {
						if (!this.searchdt.cd) {
							this.message.error("请选择日期");
							return;
						}

						if (!this.searchdt.st) {
							this.message.error("请选择开始时间");
							return;
						}

						if (!this.searchdt.et) {
							this.message.error("请选择结束时间");
							return;
						}


						this.searchObj.cd = this.searchdt.cd;
						this.searchObj.st = this.searchdt.st;
						this.searchObj.et = this.searchdt.et;
						this.$emit("change", this.searchObj);
						this.searchdt.show = false;
					},
					clean: () => {
						this.searchdt.cd = null;
						this.searchdt.st = null;
						this.searchdt.et = null;
						this.searchdt.show = false;
						this.searchObj.cd = null;
						this.searchObj.st = null;
						this.searchObj.et = null;
						this.$emit("change", this.searchObj);
					},
					cancel: () => {
						this.searchdt.show = false;
					},
				},

				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,

				searchObj: {
					storeid: "",
					tp: "",
					func: "",
					cd: null,
					st: null,
					et: null
				}
			};
		},
		methods: {
			timeChange: function(e, hpl, tag) {
				hpl[tag] = e.detail.value;
			},
			cancelAll: function() {
				this.searchMd.cancel();
				this.searchtp.cancel();
				this.searchfunc.cancel();
				this.searchdt.cancel();
			}
		}
	}
</script>

<style>
</style>